<template>
  <div id="app">
    <div id="background"></div> <!-- 背景容器 -->

    <nav>区块链溯源系统</nav>

    <main>
      <router-view />
    </main>

    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/" icon="home-o">商家部署</van-tabbar-item>
      <van-tabbar-item to="/View" icon="friends-o">客户查看</van-tabbar-item>
    </van-tabbar>
  </div>

  <div id="snowflakes">
      <!-- Dynamic snowflake generation using v-for -->
      <div
        v-for="n in 25"
        :key="n"
        class="snowflake"
        :style="{
          left: (Math.random() * 100) + '%',
          animationDuration: (Math.random() * 5 + 5) + 's'
        }"
      >❄</div>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  setup() {
    const active = ref(0);  

    return {
      active
    };
  }
};
</script>

<style scoped>
/* 使背景图铺满整个页面 */
#app {
  position: relative;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 32px;
  height: 100vh; /* 确保应用高度为100% */
  overflow: hidden; /* 防止背景图滚动 */
}

#snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不影响用户交互 */
  z-index: 5; /* 雪花在背景图上方，内容下方 */
  overflow: hidden; /* 防止雪花超出容器 */
}

/* 单个雪花样式 */
.snowflake {
  position: absolute;
  top: -10px; /* 雪花从视口上方开始 */
  font-size: 1.5em;
  color: pink;
  opacity: 0.8; /* 半透明雪花 */
  animation: fall linear infinite;
}

/* 雪花下落的动画 */
@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg); /* 雪花从顶部下落到视口底部并旋转 */
  }
}

/* nav 样式 */
nav {
  text-align: center;
  color: #1989fa;
  padding: 20px 0;
}

/* main 内容区域 */
main {
  z-index: 1; /* 确保内容位于背景之上 */
  padding: 20px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./jpg/1d7964c1cec4ee0080a06a829f58cb1b.jpg");
  background-size:auto; /* 背景图覆盖整个容器 */
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0; /* 背景图位于最底层 */
}

/* 设置底部 Tabbar */
.van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9); /* 背景半透明 */
}
</style>
